@keyframes gradient {
    0% {
        background-position-x: 100%;
    }
    100% {
        background-position-x: -50%;
    }
}

.streaming-progress {
    &__count {
        padding: 0.375rem 0.75rem; // Match padding for .btn (but this is not a button)
        color: var(--link-color);

        .theme-redesign & {
            color: var(--body-color);
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            border-radius: var(--border-radius);

            &--in-progress {
                color: var(--link-color);
            }
        }

        &--in-progress {
            background-color: var(--color-bg-2);
            color: $oc-blue-6;
            background-image: linear-gradient(90deg, transparent 25%, $oc-blue-6 25%, $oc-blue-6 40%, transparent 40%);
            background-size: 200% 1px;
            background-repeat: no-repeat;
            background-position-y: bottom;
            background-position-x: 100%;
            animation: gradient 3s linear infinite;
        }
    }

    &__count-icon {
        .theme-redesign & {
            display: none;
        }
    }

    &__skipped {
        &--warning {
            color: var(--infobar-warning-color);
        }

        &-popover {
            width: 20rem;
            padding: 0;
        }
    }

    .theme-redesign & {
        flex-grow: 1;
    }
}

.streaming-skipped-item {
    &__button {
        &:disabled {
            opacity: 1;

            .theme-redesign & {
                color: var(--body-color);
            }
        }
    }

    // Not needed once .theme-redesign is removed
    &__icon {
        color: var(--primary);
    }

    &__message {
        $border-size: 2px;

        border-left: $border-size solid var(--primary);

        // Border should appear directly under the width of the icon
        // Halfway past the icon, minus half the border size
        margin-left: calc(#{$icon-inline-size} / 2 - #{$border-size} / 2 + 0.75rem);
        // Halfway past the icon, minus half the border size, plus the icon's right margin
        padding-left: calc(#{$icon-inline-size} / 2 - #{$border-size} / 2 + 0.5rem);

        margin-right: 0.75rem;

        &.markdown {
            code {
                // Force line breaks on markdown `code` elements
                white-space: normal;
                word-break: break-all;
            }

            ul {
                padding-left: 1rem;
            }
        }
    }

    &__bottom-border-spacer {
        border-bottom: 1px solid var(--border-color-2);
        margin-left: 0.75rem;
        margin-right: 0.75rem;
    }

    &__chevron {
        fill: currentColor !important;
    }

    &--warn {
        // Not needed once .theme-redesign is removed
        .streaming-skipped-item__icon {
            color: var(--danger);
        }

        .streaming-skipped-item__message {
            border-left-color: var(--danger);
        }
    }
}
